<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#d1{
				width: 100px;
				height: 100px;
				background:yellowgreen;	
				position:absolute;			
			}
		</style>
		<script>
			class ABC{
				constructor(d1,d){
					this.d1 = document.querySelector('d1');
					this.d = d;
				}
				show(){
					var odiv = this.d1;
					var d = this.d;
					this.d1.onmousedown = function (ev) {
						var ev = ev || ev.event;
						var x = ev.clientX-this.offsetLeft;
						var y = ev.clientY-this.offsetTop;
						d.onmousemove = function(ev){
                         	var ev1 = ev||ev.event;
                         	odiv.style.left = ev1.clientX - x+"px";
                         	odiv.style.top = ev1.clientY-y+"px";
                        }
						d.onmouseup = function () {
                         	document.onmousemove = null;
                        }
						return false;
					}
				}
			}
			window.onload = function(){
				var t = new ABC("#d1",document)
				t.show();
			}
		</script>
	</head>
	<body>
		<div id="d1"></div>
	</body>
</html>
